<!--请假申请 根据类型不同 里面的条件不一样-->
<!--leave=请假 business_trip=出差 car_maintenance=车辆维修 cost_approver=费用审批
       material_purchasing=物资采购 business_entertaining=公务招待 apply_money=请款申请 salary=工资发-->
<template>
  <div class="attendanceApplyContainer">
    <!--头部bar开始-->
    <CommonBar :options="options"></CommonBar>
    <!--头部bar结束-->
    <!--请假表单开始-->
    <van-cell-group class="attendanceApplycontent">
      <!-- 请假类型-->
      <div v-if="group_id==1">
        <div class="divheight"></div>
        <van-field
          required
          readonly
          clickable
          label="请假类型"
          :value="leave"
          placeholder="请选择"
          @click="showPickerleave = true"
          right-icon="arrow"
        />
        <van-popup v-model="showPickerleave" position="bottom">
          <van-picker
            show-toolbar
            :columns="leavecolumns"
            @cancel="showPickerleave = false"
            @confirm="onConfirmsex"
          />
        </van-popup>
        <!-- 开始时间-->
        <van-field
          required
          readonly
          clickable
          label="开始时间"
          :value="start_date"
          placeholder="请选择"
          @click="showPickerstart = true"
          right-icon="arrow"
          type="datetime"
        />
        <van-popup v-model="showPickerstart" position="bottom">
          <van-datetime-picker
            type="datetime"
            @cancel="showPickerstart = false"
            @confirm="onConfirmstart_date"
            v-model="currentDate"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
          />
        </van-popup>
        <!-- 结束时间-->
        <van-field
          required
          readonly
          clickable
          label="结束时间"
          :value="end_date"
          placeholder="请选择"
          @click="clickenddate"
          right-icon="arrow"
          type="datetime"
        />
        <van-popup v-model="showPickerend" position="bottom">
          <van-datetime-picker
            type="datetime"
            @cancel="showPickerend = false"
            @confirm="onConfirmend_date"
            v-model="currentDate"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
          />
        </van-popup>
        <!-- 时长"-->
        <van-field readonly v-model="leave_time" required clearable label="时长" />
        <p class="approvdesc">时长将自动计入考勤统计</p>
        <div class="divheight"></div>
        <!-- 请假事由"-->
        <van-field label="请假事由" required readonly />
        <van-field
          v-model="leave_info"
          clearable
          type="textarea"
          placeholder="请输入请假事由"
          class="textdesc"
        />
      </div>
      <!-- 请假类型结束-->
      <!--出差开始-->
      <div v-if="group_id==2">
        <div class="divheight"></div>
        <!-- 出差事由"-->
        <van-field label="出差事由" required placeholder="请输入出差事由" clearable v-model="leave_info" />
        <div class="divheight"></div>
        <!-- 开始时间-->
        <van-field
          required
          readonly
          clickable
          label="开始时间"
          :value="start_date"
          placeholder="请选择"
          @click="showPickerstart = true"
          right-icon="arrow"
          type="datetime"
        />
        <van-popup v-model="showPickerstart" position="bottom">
          <van-datetime-picker
            type="datetime"
            @cancel="showPickerstart = false"
            @confirm="onConfirmstart_date"
            v-model="currentDate"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
          />
        </van-popup>
        <!-- 结束时间-->
        <van-field
          required
          readonly
          clickable
          label="结束时间"
          :value="end_date"
          placeholder="请选择"
          @click="clickenddate"
          right-icon="arrow"
          type="datetime"
        />
        <van-popup v-model="showPickerend" position="bottom">
          <van-datetime-picker
            type="datetime"
            @cancel="showPickerend = false"
            @confirm="onConfirmend_date"
            v-model="currentDate"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
          />
        </van-popup>
        <!-- 时长"-->
        <van-field readonly v-model="leave_time" required clearable label="时长" />
        <p class="approvdesc">时长将自动计入考勤统计</p>

        <van-field label="报销金额" required v-model="money" placeholder="请输入报销金额" type="number" />
        <div class="divheight"></div>
        <!--交通工具-->
        <van-field
          readonly
          required
          clickable
          label="交通工具"
          :value="travel_tools_text"
          placeholder="请选择"
          @click="showPickertravle = true"
          right-icon="arrow"
        />
        <van-popup v-model="showPickertravle" position="bottom">
          <van-picker
            show-toolbar
            :columns="travelcolumns"
            @cancel="showPickerleave = false"
            @confirm="onConfirmtravel"
          />
        </van-popup>
        <!--单程往返-->
        <van-field
          readonly
          required
          clickable
          label="单程往返"
          :value="one_way_text"
          placeholder="请选择"
          @click="showPickerway = true"
          right-icon="arrow"
        />
        <van-popup v-model="showPickerway" position="bottom">
          <van-picker
            show-toolbar
            :columns="waycolumns"
            @cancel="showPickerway = false"
            @confirm="onConfirmway"
          />
        </van-popup>
        <!--出发城市-->
        <van-field
          readonly
          clickable
          required
          label="出发城市"
          :value="go_city"
          placeholder="请选择"
          @click="showPickerCity = true"
          right-icon="arrow"
        />
        <van-popup v-model="showPickerCity" position="bottom">
          <van-area
            :area-list="AreaList"
            :columns-num="2"
            @cancel="showPickerCity = false"
            @confirm="onConfirmCity"
          />
        </van-popup>
        <!--目的城市-->
        <van-field
          readonly
          required
          clickable
          label="目的城市"
          :value="to_city"
          placeholder="请选择"
          @click="showPickerToCity = true"
          right-icon="arrow"
        />
        <van-popup v-model="showPickerToCity" position="bottom">
          <van-area
            :area-list="AreaList"
            :columns-num="2"
            @cancel="showPickerToCity = false"
            @confirm="onConfirmToCity"
          />
        </van-popup>

        <van-field label="出差备注" readonly required />
        <van-field
          v-model="comment"
          clearable
          type="textarea"
          placeholder="请输入出差备注"
          class="textdesc"
        />
      </div>
      <!--出差结束-->
      <!-- 车辆维修类型开始-->
      <div v-if="group_id==3">
        <div class="divheight"></div>
        <van-field
          required
          readonly
          clickable
          label="车牌号码"
          :value="license_plate_text"
          placeholder="请选择"
          @click="showPickercar = true"
          right-icon="arrow"
        />
        <van-popup v-model="showPickercar" position="bottom">
          <van-picker
            show-toolbar
            :columns="carnamecolumns"
            @cancel="showPickercar = false"
            @confirm="onConfirmcarid"
          />
        </van-popup>
        <!-- 开始时间-->
        <van-field
          required
          readonly
          clickable
          label="维修开始时间"
          :value="start_date"
          placeholder="请选择"
          @click="showPickerstart = true"
          right-icon="arrow"
          type="datetime"
        />
        <van-popup v-model="showPickerstart" position="bottom">
          <van-datetime-picker
            type="datetime"
            @cancel="showPickerstart = false"
            @confirm="onConfirmstart_date"
            v-model="currentDate"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
          />
        </van-popup>
        <!-- 结束时间-->
        <van-field
          required
          readonly
          clickable
          label="维修结束时间"
          :value="end_date"
          placeholder="请选择"
          @click="clickenddate"
          right-icon="arrow"
          type="datetime"
        />
        <van-popup v-model="showPickerend" position="bottom">
          <van-datetime-picker
            type="datetime"
            @cancel="showPickerend = false"
            @confirm="onConfirmend_date"
            v-model="currentDate"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
          />
        </van-popup>
        <!-- 时长"-->
        <van-field readonly v-model="leave_time" required clearable label="维修时长" />
        <p class="approvdesc">时长将自动计入考勤统计</p>
        <div class="divheight"></div>
        <van-field label="维修金额" required v-model="money" type="number" placeholder="请输入维修金额" />
        <!-- 请假事由"-->
        <van-field label="维修地址" required v-model="maintenance_address" placeholder="请输入维修地址" />

        <van-field label="维修说明" readonly required />
        <van-field
          v-model="leave_info"
          clearable
          type="textarea"
          placeholder="请输入维修说明"
          class="textdesc"
        />
        <van-field label="维修备注" readonly required />
        <van-field
          v-model="comment"
          clearable
          type="textarea"
          placeholder="请输入维修备注"
          class="textdesc"
        />
      </div>
      <!-- 车辆维修类型结束-->
      <!-- 费用审批和请款类型开始-->
      <div v-if="group_id==4 ||group_id==7 ">
        <van-field label="申请事由" required placeholder="请输入申请事由" clearable v-model="leave_info" />
        <div class="divheight"></div>
        <van-field label="申请金额" required v-model="money" placeholder="请输入申请金额" type="number" />
        <van-field label="付款对象" required v-model="payment_object" placeholder="请输入付款对象" />
        <van-field
          required
          readonly
          clickable
          label="支付方式"
          :value="pay_text"
          placeholder="请选择"
          @click="showPickerpay = true"
          right-icon="arrow"
        />
        <van-popup v-model="showPickerpay" position="bottom">
          <van-picker
            show-toolbar
            :columns="paycolumns"
            @cancel="showPickerpay = false"
            @confirm="onConfirmpay"
          />
        </van-popup>
        <van-field
          required
          readonly
          clickable
          label="付款日期"
          :value="payment_date"
          placeholder="请选择"
          @click="showPickerstart = true"
          right-icon="arrow"
          type="datetime"
        />
        <van-popup v-model="showPickerstart" position="bottom">
          <van-datetime-picker
            type="datetime"
            @cancel="showPickerstart = false"
            @confirm="onConfirmstart_date"
            v-model="currentDate"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
          />
        </van-popup>
        <van-field label="申请备注" readonly required />
        <van-field
          v-model="comment"
          clearable
          type="textarea"
          placeholder="请输入申请备注"
          class="textdesc"
        />
      </div>
      <!-- 费用审批类型和请款结束-->
      <!-- 采购物资类型开始-->
      <div v-if="group_id==5">
        <van-field label="申请事由" required placeholder="请输入申请事由" clearable v-model="leave_info" />
        <div class="divheight"></div>

        <!--交通工具-->
        <van-field
          required
          readonly
          clickable
          label="采购类型"
          :value="procurement_type_text"
          placeholder="请选择"
          @click="showPickercaig = true"
          right-icon="arrow"
        />
        <van-popup v-model="showPickercaig" position="bottom">
          <van-picker
            show-toolbar
            :columns="caigcolumns"
            @cancel="showPickercaig = false"
            @confirm="onConfirmpcg"
          />
        </van-popup>
        <van-field
          readonly
          required
          clickable
          label="支付方式"
          :value="pay_text"
          placeholder="请选择"
          @click="showPickerpay = true"
          right-icon="arrow"
        />
        <van-popup v-model="showPickerpay" position="bottom">
          <van-picker
            show-toolbar
            :columns="paycolumns"
            @cancel="showPickerpay = false"
            @confirm="onConfirmpay"
          />
        </van-popup>
        <van-field
          readonly
          required
          clickable
          label="期望交付日期"
          :value="payment_date"
          placeholder="请选择"
          @click="showPickerstart = true"
          right-icon="arrow"
          type="datetime"
        />
        <van-popup v-model="showPickerstart" position="bottom">
          <van-datetime-picker
            type="datetime"
            @cancel="showPickerstart = false"
            @confirm="onConfirmstart_date"
            v-model="currentDate"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
          />
        </van-popup>
        <van-field label="采购品名,规格,数量" readonly required />
        <van-field
          v-model="details"
          clearable
          type="textarea"
          placeholder="请输入采购品名,规格,数量"
          class="textdesc"
        />

        <van-field label="供应商或淘宝链接" readonly required />
        <van-field
          v-model="procurement_link"
          clearable
          type="textarea"
          placeholder="请输入供应商或淘宝链接"
          class="textdesc"
        />
        <van-field label="申请备注" readonly required />
        <van-field
          v-model="comment"
          clearable
          type="textarea"
          placeholder="请输入申请备注"
          class="textdesc"
        />
      </div>
      <!-- 采购物资类型结束-->
      <!-- 公务招待类型开始-->
      <div v-if="group_id==6">
        <van-field label="申请事由" required placeholder="请输入申请事由" clearable v-model="leave_info" />
        <div class="divheight"></div>
        <van-field label="招待金额" required v-model="money" placeholder="请输入招待金额" type="number" />
        <van-field label="招待人或公司名" required v-model="company" placeholder="请输入招待人或公司名" />
        <van-field label="招待人数" required v-model="number" placeholder="请输入招待人数" type="number" />
        <van-field label="招待地址" required v-model="gwaddress" placeholder="请输入招待地址" />

        <!--交通工具-->
        <van-field
          required
          readonly
          clickable
          label="支付方式"
          :value="pay_text"
          placeholder="请选择"
          @click="showPickerpay = true"
          right-icon="arrow"
        />
        <van-popup v-model="showPickerpay" position="bottom">
          <van-picker
            show-toolbar
            :columns="paycolumns"
            @cancel="showPickerpay = false"
            @confirm="onConfirmpay"
          />
        </van-popup>
        <!-- 开始时间-->
        <van-field
          required
          readonly
          clickable
          label="期望招待日期"
          :value="payment_date"
          placeholder="请选择"
          @click="showPickerstart = true"
          right-icon="arrow"
          type="datetime"
        />
        <van-popup v-model="showPickerstart" position="bottom">
          <van-datetime-picker
            type="datetime"
            @cancel="showPickerstart = false"
            @confirm="onConfirmstart_date"
            v-model="currentDate"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
          />
        </van-popup>

        <!-- 请假事由"-->
        <van-field required label="申请备注" readonly />
        <van-field
          v-model="comment"
          clearable
          type="textarea"
          placeholder="请输入申请备注"
          class="textdesc"
        />
      </div>
      <!-- 公务招待类型结束-->
      <!-- 工资发放类型开始-->
      <div v-if="group_id==8 ">
        <van-field label="申请事由" required placeholder="请输入申请事由" clearable v-model="leave_info" />
        <div class="divheight"></div>
        <van-field label="发放工资金额" required v-model="money" placeholder="请输入发放工资金额" type="number" />

        <!-- 开始时间-->
        <van-field
          required
          readonly
          clickable
          label="发放日期"
          :value="payment_date"
          placeholder="请选择"
          @click="showPickerstart = true"
          right-icon="arrow"
          type="datetime"
        />
        <van-popup v-model="showPickerstart" position="bottom">
          <van-datetime-picker
            type="datetime"
            @cancel="showPickerstart = false"
            @confirm="onConfirmstart_date"
            v-model="currentDate"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
          />
        </van-popup>

        <!-- 请假事由"-->
        <van-field label="申请备注" required readonly />
        <van-field
          v-model="comment"
          clearable
          type="textarea"
          placeholder="请输入申请备注"
          class="textdesc"
        />
      </div>
      <!-- 工资发放类型结束-->
      <div class="divheight"></div>
      <!-- 审批流程"-->
      <div class="titledesc">
        <van-field label="审批流程" readonly />
      </div>
      <div class="approveContent">
        <div v-for="item in approver" :key="item.id">
          <div class="approve_step">
            <div class="approve_step_left">
              <p class="title" v-if="item.type==1">抄送人</p>
              <p class="title" v-if="item.type==2">审批人</p>
            </div>
            <div class="approve_step_right">
              <van-image
                v-if="item.avatar.length>0"
                round
                width="39px"
                height="39px"
                :src="`http://www.kdehw.com:83/uploads/images/user/${item.avatar}`"
                fit="cover"
                class="kaoqintx"
              />
              <p class="txphoto" v-else>{{substringname(item.name)}}</p>
              <p class="smalltitle">{{item.name}}</p>
            </div>
          </div>
        </div>
      </div>
    </van-cell-group>

    <!--请假表单结束-->
    <div class="butbottom butbottom1">
      <button class="subbut" @click="submitdata" :disabled="submit">提交</button>
    </div>
  </div>
</template>
<script>
import AreaList from "../utils/area";
import { mapState } from "vuex";
import CommonBar from "../common/commonBar";
export default {
  components: {
    CommonBar
  },
  data() {
    return {
      options: {
        type: "icon",
        centerText: "请假申请",
        iconNname: "wap-home",
        lefttype: "left"
      },
      submit: false,
      leave_time: "", //时长
      leave_info: "", //请假理由
      uploader: [], //文件上传
      leave: "", //请假类型

      showPickerleave: false,
      leavecolumns: [],
      start_date: "", //开始时间
      end_date: "", //结束时间
      showPickerend: false,
      showPickerstart: false,
      currentDate: new Date(),
      minDate: "",
      maxDate: "",
      template_id: "",
      group_id: "", //类型id
      leaveType: "", //请假类型
      leavelong: "", //请假时长传后台
      approver: [], //审批人呢
      /**出差 */
      //交通工具
      showPickertravle: false,
      travel_tools: "",
      travel_tools_text: "",
      travelcolumns: [
        { keyId: 1, text: "火车" },
        { keyId: 2, text: "飞机" },
        { keyId: 3, text: "汽车" },
        { keyId: 4, text: "其他" }
      ],
      one_way_text: "",
      showPickerway: false,
      one_way: "",
      waycolumns: [
        { keyId: 1, text: "单程" },
        { keyId: 2, text: "往返" }
      ],
      //出发城市
      AreaList: AreaList,
      go_city: "",
      showPickerCity: false,
      to_city: "",
      showPickerToCity: false,
      comment: "",
      money: "",
      //车辆维修
      carnamecolumns: [],
      showPickercar: false,
      license_plate: "",
      license_plate_text: "",
      maintenance_address: "",
      //审批费用
      payment_object: "",

      showPickerpay: false,
      pay_text: "",
      pay: "",
      paycolumns: [
        { keyId: 1, text: "现金" },
        { keyId: 2, text: "支付宝" },
        { keyId: 3, text: "微信" },
        { keyId: 4, text: "其他" }
      ],
      payment_date: "",
      //采购物资
      procurement_type_text: "",
      procurement_type: "",
      showPickercaig: false,
      caigcolumns: [
        { keyId: 1, text: "办公用品" },
        { keyId: 2, text: "补充车辆" },
        { keyId: 3, text: "清扫物资" },
        { keyId: 4, text: "工服" },
        { keyId: 5, text: "其他" }
      ],
      details: "",
      procurement_link: "",
      /**公务招待 */
      company: "",
      number: "",
      gwaddress: ""
    };
  },
  created() {
    this.template_id = this.$route.query.template_id;
    this.group_id = this.$route.query.group_id;
    this.options.centerText = this.showType(2);
    console.log("模板id", this.template_id, this.group_id);
    this.onConfirmTime();
  },
  mounted() {
    if (this.group_id == 1) {
      this.getLeaveTypeData();
    } else if (this.group_id == 3) {
      this.ListCar();
    } else if (this.group_id == 5 || this.group_id == 6) {
      this.GetApproverList();
    }
    var that = this;
  },
  //同时监听两个参数，并执行方法
  computed: {
    address() {
      const { leave_time, leaveType, money, group_id } = this;
      return {
        leave_time,
        leaveType,
        money,
        group_id
      };
    },
    ...mapState({
      token: state => state.Authorization
    })
  },
  watch: {
    address: {
      handler: function(newval, oldval) {
        if (
          newval.leave_time !== "" &&
          newval.leaveType !== "" &&
          oldval.group_id == 1
        ) {
          //console.log(oldval.group_id);

          this.GetApproverList();
        } else if (
          newval.leave_time !== "" &&
          newval.money !== "" &&
          oldval.group_id == 2
        ) {
          this.GetApproverList();
        } else if (newval.leave_time !== "" && oldval.group_id == 3) {
          this.GetApproverList();
        } else if (
          (newval.money !== "" && oldval.group_id == 4) ||
          oldval.group_id == 7 ||
          oldval.group_id == 8
        ) {
          this.GetApproverList();
        }
      },
      deep: true
    }
  },

  methods: {
    //取头像
       substringname(username) {
      if (username) {
        if (username.length >= 3) {
          return username.substr(username.length - 2, 2);
        } else {
          return username;
        }
      }
    },
    showType(title) {
      var type = "";
      var centerText = "";
      if (this.group_id == 1) {
        type = "leave";
        centerText = "请假申请";
      } else if (this.group_id == 2) {
        type = "business_trip";
        centerText = "出差申请";
      } else if (this.group_id == 3) {
        type = "car_maintenance";
        centerText = "车辆维修申请";
      } else if (this.group_id == 4) {
        type = "cost_approver";
        centerText = "费用审批申请";
      } else if (this.group_id == 5) {
        type = "material_purchasing";
        centerText = "物资采购申请";
      } else if (this.group_id == 6) {
        type = "business_entertaining";
        centerText = "公务招待申请";
      } else if (this.group_id == 7) {
        type = "apply_money";
        centerText = "请款申请";
      } else if (this.group_id == 8) {
        type = "salary";
        centerText = "工资发放申请";
      }
      if (title == 1) {
        return type;
      } else if (title == 2) {
        return centerText;
      }
    },
    getDuration(my_time) {
      var days = my_time / 1000 / 60 / 60 / 24;
      var daysRound = Math.floor(days);
      var hours = my_time / 1000 / 60 / 60 - 24 * daysRound;
      var hoursRound = Math.floor(hours);
      var minutes = my_time / 1000 / 60 - 24 * 60 * daysRound - 60 * hoursRound;
      var minutesRound = Math.floor(minutes);
      var seconds =
        my_time / 1000 -
        24 * 60 * 60 * daysRound -
        60 * 60 * hoursRound -
        60 * minutesRound;
      //传时长为几天
      var leavea = my_time / 1000 / 60 / 60 / 24;
      this.leavelong = leavea.toFixed(1);
      //console.log("几天", this.leavelong);
      //时长显示在前端
      this.leave_time = daysRound + "天" + hoursRound + "小时";
      if (hoursRound == 0) {
        this.leave_time = daysRound + "天";
      } else if (daysRound == 0) {
        this.leave_time = hoursRound + "小时";
      }
    },
    /**请假申请接口 */
    getLeaveTypeData() {
      var params = {
        token: this.token
      };
      this.$http
        .get(
          `${this.$basePath}?service=App.LeaveType.GetLeaveTypeList&api=89`,
          {
            params: params
          }
        )
        .then(res => {
          if (res.ret == 200) {
            //console.log("请假接口", res);
            var arr = res.data;
            var newArray = [];
            arr.forEach(function(item) {
              newArray.push({ id: item.id, name: item.name });
            });
            this.leavecolumns = newArray.map(o => {
              return { keyId: o.id, text: o.name }; //注意要把数组里的所有字段都加上
            });
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },
    //请假类型选中
    onConfirmsex(value) {
      this.leave = value.text;
      this.leaveType = value.keyId;
      //console.log(this.leaveType);
      this.showPickerleave = false;
    },
    formatter(type, value) {
      if (type === "year") {
        return `${value}年`;
      } else if (type === "month") {
        return `${value}月`;
      } else if (type === "day") {
        return `${value}日`;
      } else if (type === "hour") {
        return `${value}时`;
      } else if (type === "minute") {
        return `${value}分`;
      } else if (type === "second") {
        return `${value}秒`;
      }
      return value;
    },

    //开始时间
    onConfirmstart_date(val) {
      let year = val.getFullYear();
      let month = val.getMonth() + 1;
      let day = val.getDate();
      let hour = val.getHours();
      let minute = val.getMinutes();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`;
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`;
      }
      this.start_date = `${year}-${month}-${day} ${hour}:${minute}`;
      this.payment_date = `${year}-${month}-${day}`;
      this.showPickerstart = false;
    },
    //结束时间
    onConfirmend_date(val) {
      let year = val.getFullYear();
      let month = val.getMonth() + 1;
      let day = val.getDate();
      let hour = val.getHours();
      let minute = val.getMinutes();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`;
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`;
      }
      this.end_date = `${year}-${month}-${day} ${hour}:${minute}`;
      if (
        new Date(this.start_date.replace(/-/g, "/")) >
        new Date(this.end_date.replace(/-/g, "/"))
      ) {
        this.$toast({ message: "结束时间不能大于开始时间,请重新选择" });
        this.showPickerend = false;
        this.end_date = "";
      } else {
        if (this.start_date != "") {
          this.showPickerend = false;
          var start_date = new Date(
            this.start_date.replace(/-/g, "/")
          ).getTime();
          //console.log(start_date);
          var end_date = new Date(this.end_date.replace(/-/g, "/")).getTime();
          //console.log(end_date);
          var total = end_date - start_date; //时间差
          // console.log();
          this.getDuration(total);
        }
      }
    },
    //选择结束时间
    clickenddate() {
      if (this.start_date !== "") {
        this.showPickerend = true;
      } else {
        this.$toast({ message: "请先选择开始时间" });
      }
    },

    //所在地选中
    onConfirmCity(value) {
      this.go_city = value[0].name + value[1].name;
      this.showPickerCity = false;
    },
    //选择入行时间
    onConfirmwork(value) {
      var d = new Date(value);
      var datetime =
        d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
      this.signworktime = datetime;
      this.showPickerwork = false;
    },
    //开始时间和结束时间
    onConfirmTime() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth();
      var day = date.getDate();
      this.minDate = new Date(year - 1, month, day);
      this.maxDate = new Date(year + 1, month, day);
    },
    /**出差类型 */
    //交通工具选中
    onConfirmtravel(value) {
      this.travel_tools_text = value.text;
      this.travel_tools = value.keyId;

      this.showPickertravle = false;
    },
    //往返类型选中
    onConfirmway(value) {
      this.one_way_text = value.text;
      this.one_way = value.keyId;
      this.showPickerway = false;
    },
    //出发城市选中
    onConfirmCity(value) {
      this.go_city = value[0].name + value[1].name;
      this.showPickerCity = false;
    },
    //目的城市选中
    onConfirmToCity(value) {
      this.to_city = value[0].name + value[1].name;
      this.showPickerToCity = false;
    },
    /**车辆维修 */
    //车牌号
    ListCar() {
      var params = {
        token: this.token
      };
      this.$http
        .get(`${this.$basePath}?service=App.CarAlert.ListCarByAlert&api=91`, {
          params: params
        })
        .then(res => {
          if (res.ret == 200) {
            //console.log("车辆名称", res);
            for (var car in res.data) {
              var ret = {};
              ret.text = car;
              ret.keyId = res.data[car];
              this.carnamecolumns.push(ret);
            }
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },

    //选择车牌
    onConfirmcarid(value) {
      this.license_plate_text = value.text;
      this.license_plate = value.keyId;
      this.showPickercar = false;
    },
    /**费用审批 */
    onConfirmpay(value) {
      this.pay_text = value.text;
      this.pay = value.keyId;
      this.showPickerpay = false;
    },
    /**采购物资 */
    onConfirmpcg(value) {
      this.procurement_type_text = value.text;
      this.procurement_type = value.keyId;
      this.showPickercaig = false;
    },
    //获取审批人接口
    GetApproverList() {
      var params = {
        token: this.token,
        template_id: this.template_id,
        leave_time: this.leavelong,
        type: this.leaveType,
        money: this.money
      };
      this.$http
        .get(`${this.$basePath}?service=App.Leave.GetApproverList&api=89`, {
          params: params
        })
        .then(res => {
          if (res.ret == 200) {
            //console.log("审批接口", res);
            this.approver = res.data;
          } else {
            this.submit = true;
            this.$toast({ message: res.msg });
          }
        });
    },
    //请假接口
    submitdata() {
      //过滤表情
      var regStr = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi;

      if (regStr.test(this.leave_info)) {
        this.leave_info = this.leave_info.replace(regStr, "");
      }
      /**
       *  leave=请假 business_trip=出差 car_maintenance=车辆维修 cost_approver=费用审批 material_purchasing=物资采购 business_entertaining=公务招待 salary=工资发放
       */
      var type = this.showType(1);
      if (this.group_id == 1) {
        //请假
        var form_data = {
          start_date: this.start_date, //开始时间
          end_date: this.end_date, //结束时间类型
          leave_time: this.leavelong, //时长
          leave_info: this.leave_info, //请假说明和出差说明
          type: this.leaveType //请假类型
        };
        form_data = JSON.stringify(form_data);
      } else if (this.group_id == 2) {
        var form_data = {
          start_date: this.start_date, //开始时间
          end_date: this.end_date, //结束时间类型
          leave_time: this.leavelong, //时长
          leave_info: this.leave_info, //请假说明和出差说明
          type: this.leaveType, //请假类型
          travel_tools: this.travel_tools, //出差交通工具
          one_way: this.one_way, //出差单程往返
          go_city: this.go_city, //出差出发城市
          to_city: this.to_city, //出差目的城市
          comment: this.comment, //出差描述
          money: this.money //出差金额
        };
        form_data = JSON.stringify(form_data);
      } else if (this.group_id == 3) {
        var form_data = {
          license_plate: this.license_plate_text,
          start_date: this.start_date, //开始时间
          end_date: this.end_date, //结束时间类型
          maintenance_time: this.leavelong, //时长
          maintenance_info: this.leave_info, //请假说明和出差说明
          comment: this.comment, //出差描述
          money: this.money,
          maintenance_address: this.maintenance_address //出差金额
        };
        form_data = JSON.stringify(form_data);
      } else if (this.group_id == 4 || this.group_id == 7) {
        var form_data = {
          payment_type: this.pay,
          payment_date: this.payment_date, //开始时间
          payment_object: this.payment_object, //结束时间类型
          apply_info: this.leave_info, //请假说明和出差说明
          comment: this.comment, //出差描述
          money: this.money
        };
        form_data = JSON.stringify(form_data);
      } else if (this.group_id == 5) {
        var form_data = {
          payment_type: this.pay,
          expect_date: this.payment_date, //开始时间
          procurement_type: this.procurement_type, //结束时间类型
          procurement_link: this.procurement_link,
          apply_info: this.leave_info, //请假说明和出差说明
          comment: this.comment, //出差描述
          money: this.money,
          details: this.details
        };
        form_data = JSON.stringify(form_data);
      } else if (this.group_id == 6) {
        var form_data = {
          payment_type: this.pay,
          company: this.company,
          number: this.number,
          address: this.gwaddress,
          expect_date: this.payment_date, //开始时间
          payment_type: this.pay,
          apply_info: this.leave_info, //请假说明和出差说明
          comment: this.comment, //出差描述
          money: this.money
        };
        form_data = JSON.stringify(form_data);
      } else if (this.group_id == 8) {
        var form_data = {
          payment_date: this.payment_date,
          apply_info: this.leave_info, //请假说明和出差说明
          comment: this.comment, //出差描述
          money: this.money
        };
        form_data = JSON.stringify(form_data);
      }
      var params = {
        token: this.token,
        template_id: this.template_id,
        type: type,
        form_data: form_data
      };
      this.$toast.loading({
        mask: true,
        message: "加载中...",
        duration: 5000
      });
      this.$http
        .post(`${this.$basePath}?service=App.Leave.Approve&api=89`, params)
        .then(res => {
          if (res.ret == 200) {
            this.$toast.clear();
            this.$router.push({
              //核心语句
              path: "/approveIndex" //跳转的路径
            });
          } else {
            this.$toast({ message: res.msg });
          }
        });
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/css/approve";
.attendanceApplyContainer {
  width: 100%;
}
.attendanceApplycontent {
  height: calc(100vh - 110px);
  overflow: scroll;
}
.butbottom1 {
  position: fixed;
  bottom: 0;
}
/deep/ .van-cell .van-field__label {
  min-width: 90px !important;
  width: auto !important;
  widows: auto !important;
}
[class*="van-hairline"]::after {
  border: none;
}
.txphoto {
  width: 45px;
  height: 45px;
  background: rgba(10, 213, 145, 1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  margin: 0;
}
</style>